$(document).ready(function () {

  var iosocket = io.connect();

  if (!sessionStorage.username) {
    sessionStorage.username = new Date().getTime()
  }
  var username = sessionStorage.username;


  iosocket.emit('loginIn', username); // 进入页面

  window.onunload = function () {  // 关闭页面
    iosocket.emit('loginOut', username)
  }
  $(".btn-blue").click(function () {  // 发送消息
    var text = $(".mesbox").val();
    if (text != "") {
      var data = {
        name: username,
        content: text
      }
      iosocket.emit('msgFromClient', data);
      $('.mesbox').val('');
      sendHtml(username, text);
    }
  });
  $('.close-btn').click(function () {
    $('.chat-panel').css('display', 'none')
  })
  $('.contact').click(function () {
    $('.chat-panel').css('display', 'block')
  })
  $(".mesbox").on("blur",function(){
    window.scroll(0,0);//失焦后强制让页面归位
  });  
  iosocket.on('connect', function () {
    //稍等，正在为您接入咨询
    iosocket.on('loginInServer', function (msg) {
      loginInHtml(msg);
    });
    //离开聊天室
    // iosocket.on('loginOutServer', function (msg) {
    //   loginOutHtml(msg);
    // });
    //获取消息
    iosocket.on(username, function (msg) {
      reciveHtml('客服', msg.content);
    });
  });
  // $('.mesbox').focus(function () {
  //   console.log(document.documentElement.clientHeight)
  //   // alert(document.documentElement.clientHeight)
  //   $('html').height(document.documentElement.clientHeight - 100 + 'px')
  // })
});

function sendHtml(name, content) {
  var html = "";
  html += '<div class="msg-item row send">' +
    '<div class="col">' +
    '<div class="name">匿名</div>' +
    '<div class="row mesinfo">' +
    '<div class="msg">' + content + '</div>' +
    '<div class="jiao-right"></div>' +
    '</div>' +
    '</div>' +
    '<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572927293148&di=e93c4aabed259d8845543f725b85d1b3&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01460b57e4a6fa0000012e7ed75e83.png%401280w_1l_2o_100sh.png" class="avatar" />' +
    '</div>';
  $(".room").append(html);
  $('.room').scrollTop($('.room')[0].scrollHeight);
}

function stopDefaultKey(e) {
  if (e && e.preventDefault) {
    e.preventDefault();
  } else {
    window.event.returnValue = false;
  }
  return false;
}
function reciveHtml(name, content) {
  var html = "";
  html += `<div class="msg-item row recive">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572953950629&di=06d8eb509480525ed9707e4dda361b54&imgtype=0&src=http%3A%2F%2Fimg2.3png.com%2F720f7b22a939834aca195ca984dcd114a6e2.png" class="avatar" />
            <div class="col">
              <div class="name">在线客服</div>
              <div class="row mesinfo">
                <div class="jiao-left"></div>
                <div class="msg">${content}</div>
              </div>
            </div>
          </div>`
  $(".room").append(html);
  $('.room').scrollTop($('.room')[0].scrollHeight);
}

function loginInHtml(name) {
  var html = "";
  html = '<div class="brocast">' + name + '加入聊天室</div>';
  $(".room").append(html);
  $('.room').scrollTop($('.room')[0].scrollHeight);
}

function loginOutHtml(name) {
  var html = "";
  html = '<div class="brocast">' + name + '离开聊天室</div>';
  $(".room").append(html);
  $('.room').scrollTop($('.room')[0].scrollHeight);
}

document.onkeydown = function (e) {
  var ev = document.all ? window.event : e;
  if (ev.keyCode == 13) {
    $(".btn-blue").click();
    stopDefaultKey(e)
  }
}

window.addEventListener('resize', function(){       //监测窗口大小的变化事件
  var hh = window.innerHeight;     //当前可视窗口高度
  console.log(hh)
})